stanfordfandomcom-20200214-history
Main/CS349W Project1
= Project 1 - Analyzing a Web Feature = In this project you will work in teams of two to analyze an interesting mechanism for user interaction from some existing Web application. You will present your results in class and also create a short written version as part of this Wiki. Picking an Interaction Find an existing Web site that allows users to interact with it in an interesting way (something more dynamic than just tables and forms). Use the list at the bottom of this page to collect ideas and share them with other people in the class; the more candidate topics the better! Once you have chosen a topic for your project, write your name and your partner's name next to that topic in the list. Each team should choose a different topic, but you can change your mind whenever you wish; just move your names to a different available topic. Even after you have selected a topic, if you encounter additional interesting interactions please add them to the list. The best topics are those that are relatively simple. Don't try to analyze an entire application; just pick a piece that looks interesting, such as manipulating a particular control or a particular drag-and-drop interaction, or a mechanism whereby something updates automatically. How to Analyze the Interaction The next step is to dive in and figure out how that interaction works. If you don't already know how to use the Firebug extension for Firefox you should probably learn about it; it has lots of great tools for analyzing and debugging Web pages. Look at the HTML to see how the information is displayed, then find the relevant event handlers and walk through the Javascript code to see how the interaction is implemented. If the interaction involves AJAX requests back to the server, see what those requests are: what data is kept on the browser and what data is fetched from the server? Writing up Your Results Once you have analyzed your interaction, create a new page in this Wiki, linked from your project's listing in the table below. Your writeup should address what you think is most interesting about the interaction, and what you think other people can learn from it. Here are some examples of questions you might answer in your write-up (you don't need to address all of these): * What is the overall structure of the interaction? * What is the role of Javascript (event handlers, AJAX requests, etc.)? * What parts of the interaction happen in the browser and what parts require server interaction? * If data is fetched dynamically from the server, what is the granularity of those patches? Are there any special techniques for hiding latency, such as prefetching? * Are there things about the facilities of the Web that made this interaction either easy or hard? * Did the interaction have to contort itself to get around problems with the Web? * Are there improvements to the Web that would have made this interaction easier to implement, or that would have allowed a more powerful interaction? * Are the techniques used in this interaction relevant for a broader class of interactions? Overall, your writeup shouldn't be more than the equivalent of 1-2 pages of text. Keep it short and focus on what is most important. Class Presentations You'll also present your results in a 5-minute presentation to the class; this should include a short demo of the feature followed by a discussion of the key ideas from your writeup. I recommend making a few PowerPoint slides to organize your thoughts: 2-3 slides is about all you will have time for. If you finish in 5 minutes there will be time for one or two questions afterwards. Schedule Here is the schedule for the project: Wed. Oct. 8, 5:00 P.M. - Team and topic selected Fri. Oct. 17, 5:00 P.M. - Project finished: writeup on Wiki Mon. Oct. 20 - Fri. Oct. 24 - Presentations in class Possible Topics Add your ideas to this list. If names are present next to a topic it means the topic has been "claimed" by that team. * radicalcartography.net and the maps within ** The maps are interesting but where's the interaction? It seems like most maps are prerendered. --Jmao 05:26, 2 October 2008 (UTC) * Dragging in Google Maps (Brian Eggleston and Michael Fischer) * Navigating in Google Street View * Tagging images in Facebook * Rearranging the sections of your home page in Facebook * WYSIWYG editing of rich text in some application (i.e. FCKEditor) * Modista.com navigation * Interactivity on SmugMug Photo Interface (David Underhill & Nopparut Abhinoraseth (Big)) * eyeOS interface (Daniel Sanchez & Bahman Bahmani) * Carousel - http://sorgalla.com/projects/jcarousel/examples/dynamic_flickr_feed.html * Interactive TreeMap - http://www.finviz.com/map.ashx?t=sec (James Mao & Juho Kim) * Zimbra / Stanford WebMail * The login for this wiki page * Evernote interface * Apture interface for adding links (Jing Chen & Benjamin Bercovitz) * Email Pagination Interaction on Google Gmail (Julien Wetterwald & Seng Keat Teh) * FlexBook Interface (James Chen & Bear Travis) * Colorpicker.com color picker (Eric Choi & Tejaswi Tenneti) * Lightbox 2 - http://www.lokeshdhakar.com/projects/lightbox2/ * Yahoo Pipes - Drag n' Drop analysis * Google Suggest (Zheren Zhang & Pratyus Patnaik) * Zoomii Hover & Click - (Liz Li & Matt Martin) * iGoogle Drag-and-Drop - iGoogle Menu Rearranging (Okai Addy and Tayo Oguntebi) * Kayak.com Time Slider (Naren and Nipun) * moo.com business card editor (Indrajit and Harry) - http://moo.com * JavaFX front page widgets - http://www.javafx.com (Johnny Zhou & Garrett Eastham) Presentation Order The project presentations in class will be in the following order, from top to bottom. Teams up through Khare/Robertson should be ready to present on Monday, October 20 (we may not get through all of these, though). Everyone else should be ready to present on Wednesday, October 22. * Sanchez/Bahmani * Zhang/Patnaik * Addy/Oguntebi * Eggleston/Fischer * Chen/Travis * Chen/Bercovitz * Mao/Kim * Khare/Robertson * ---------------------- * Underhill/Abhinoraseth * Wetterwald/Teh * Choi/Tenneti * Bhatia/Raghavan * Li/Martin * Zhou/Eastham